<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }            
        </style>
         
        <script src="inheritance_manager.js" type="text/javascript" encoding="UTF-8"></script>
        <script src="node.js" type="text/javascript" encoding="UTF-8"></script>
        <script src="figure.js" type="text/javascript" encoding="UTF-8"></script>
        <script src="scene.js" type="text/javascript" encoding="UTF-8"></script>
        
        <script>

        var interval = 1000 / 60; // 60 fps
        var scene;
                    
        window.onload = function(images)
        {                            
            scene = new Scene();

            Figure.prototype.doDraw = drawRect;

            var figure1 = new Figure("figure1", 600, 500, 50, 50);
            figure1.setVelocity(10, -20);

            var figure2 = new Figure("figure2", 450, 100, 50, 50);
            figure2.setVelocity(-15, 15);

            var figure3 = new Figure("figure3", 100, 550, 50, 50);
            figure3.setVelocity(10, -15);

            var figure4 = new Figure("figure4", 700, 150, 50, 50);
            figure4.setVelocity(-20, -20);

            var figure5 = new Figure("figure5", 100, 200, 50, 50);
            figure5.setVelocity(25, -15);


            var wall1 = new Wall("wall1", 785, 300, 10, 580); // right
            var wall2 = new Wall("wall2", 15,  300, 10, 580); // left
            var wall3 = new Wall("wall3", 400, 15,  780, 10); // top
            var wall4 = new Wall("wall4", 400, 585, 780, 10); // bottom

            var block1 = new Wall("block1", 250, 300, 70, 230);
            var block2 = new Wall("block2", 550, 300, 70, 230);

            scene.addNode(wall1);
            scene.addNode(wall2);
            scene.addNode(wall3);
            scene.addNode(wall4);
            scene.addNode(block1);
            scene.addNode(block2);

            scene.addNode(figure1);
            scene.addNode(figure2);
            scene.addNode(figure3);
            scene.addNode(figure4);
            scene.addNode(figure5);

            scene.init();
            
            setInterval(update, interval);
        }
        
        function update() 
        {
            scene.update(interval);
        }


        function drawRect(node)
        {
            node.m_context.beginPath();
            node.m_context.rect(-(node.m_width / 2), -(node.m_height / 2), node.m_width, node.m_height);
            node.m_context.closePath();
            node.m_context.fillStyle = 'yellow';
            node.m_context.fill();
            node.m_context.strokeStyle = 'black';
            node.m_context.stroke();
        }

        function drawTriangle(node)
        {
            node.m_context.beginPath();
            node.m_context.moveTo(0, -(node.m_height / 2));
            node.m_context.lineTo(node.m_width / 2, node.m_height / 2);
            node.m_context.lineTo(-(node.m_width / 2), node.m_height / 2);
            node.m_context.fillStyle = 'red';
            node.m_context.fill();
        }

        function drawCircle(node)
        {
            node.m_context.beginPath();
            node.m_context.arc(0, 0, node.m_width / 2, 0, Math.PI * 2);
            node.m_context.fillStyle = 'blue';
            node.m_context.fill();
        }

        var drawMethods = [ drawRect, drawTriangle, drawCircle ];
        var currFigureInd = 0;

        function onBtnClick()
        {
            if (++currFigureInd == drawMethods.length)
            {
                currFigureInd = 0;
            }
            Figure.prototype.doDraw = drawMethods[currFigureInd];
        }

        </script>
</head>
<body onmousedown="return false;">
         
    <div id="buttondiv" style="position:relative; width:100px; height:30px">
        <button type="button" onclick="onBtnClick()">Next Figure</button>
    </div>

    <div id="canvasesdiv" style="position:relative; width:240px; height:240px">

       <canvas id="figure1" width="800" height="600" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
       <canvas id="figure2" width="800" height="600" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
       <canvas id="figure3" width="800" height="600" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
       <canvas id="figure4" width="800" height="600" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
       <canvas id="figure5" width="800" height="600" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>

       <canvas id="wall1" width="800" height="600" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
       <canvas id="wall2" width="800" height="600" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
       <canvas id="wall3" width="800" height="600" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
       <canvas id="wall4" width="800" height="600" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>

       <canvas id="block1" width="800" height="600" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
       <canvas id="block2" width="800" height="600" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
    </div>  
</body>
</html>